import React from 'react';
import { Spin } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
import clsx from 'clsx';

export interface LoadingProps {
  size?: 'small' | 'default' | 'large';
  text?: string;
  spinning?: boolean;
  className?: string;
  children?: React.ReactNode;
  overlay?: boolean;
  tip?: string;
}

const Loading: React.FC<LoadingProps> = ({
  size = 'default',
  text,
  spinning = true,
  className,
  children,
  overlay = false,
  tip
}) => {
  const customIcon = <LoadingOutlined className="text-blue-500 text-xl sm:text-2xl" spin />;

  if (children) {
    return (
      <Spin
        spinning={spinning}
        size={size}
        tip={tip || text}
        indicator={customIcon}
        className={className}
      >
        {children}
      </Spin>
    );
  }

  if (overlay) {
    return (
      <div className={clsx(
        'fixed inset-0 z-50 flex items-center justify-center',
        'bg-white/80 backdrop-blur-md',
        className
      )}>
        <div className="flex flex-col items-center space-y-4 sm:space-y-6 bg-white p-6 sm:p-8 rounded-xl sm:rounded-2xl shadow-2xl border border-gray-100 mx-4">
          <div className="relative">
            <Spin size={size} indicator={customIcon} />
            <div className="absolute inset-0 bg-blue-500/20 rounded-full animate-ping"></div>
          </div>
          {text && (
            <p className="text-gray-700 text-sm sm:text-base font-medium text-center px-2">{text}</p>
          )}
        </div>
      </div>
    );
  }

  return (
    <div className={clsx(
      'flex flex-col items-center justify-center py-8 sm:py-12',
      className
    )}>
      <div className="relative mb-4 sm:mb-6">
        <Spin size={size} indicator={customIcon} />
        <div className="absolute inset-0 bg-blue-500/10 rounded-full animate-pulse scale-150"></div>
      </div>
      {text && (
        <p className="text-gray-700 text-sm sm:text-base font-medium text-center px-4">{text}</p>
      )}
    </div>
  );
};

export default Loading;